jQuery Mobile コンポーネントシリーズ #7 「リストビュー基本編1」
前回#6では「開閉式とアコーディオン式コンテンツ」について紹介しました。
リストビューとは
リストビューとは、その名の通り、複数の項目をリスト上に並べられたもので、モバイルアプリケーションで必ずといって良いほど使われている定番のコンポーネントです。
ベーシックな複数のリンクを並べたようなリストビューはとても簡単で、リンクを含んだulタグに「data-role="listview"」を指定することで実現できます。
<ul data-role="listview"> <li><a href="#">リンク1</a></li> <li><a href="#">リンク2</a></li> <li><a href="#">リンク3</a></li> <li><a href="#">リンク4</a></li> <li><a href="#">リンク6</a></li> <li><a href="#">リンク7</a></li> <li><a href="#">リンク8</a></li> <li><a href="#">リンク9</a></li> <li><a href="#">リンク10</a></li> <li><a href="#">リンク11</a></li> <li><a href="#">リンク12</a></li> <li><a href="#">リンク13</a></li> <li><a href="#">リンク14</a></li> <li><a href="#">リンク15</a></li> </ul>
ベーシックリストビューを開く（このサンプルはChromeブラウザでの閲覧をおすすめします。）
階層化リスト
ulタグやolタグを使ってリストを入れ子にすることでリストを階層構造にすることができます。
この階層構造は、フレームワーク側が自動で処理し、子リストのページを自動生成します。
<ul data-role="listview"> <li>親要素 <ul> <li>子要素</li> <li>子要素</li> <li>子要素</li> </ul> </li> <li>親要素 <ul> <li>子要素</li> <li>子要素</li> <li>子要素</li> </ul> </li> <li>親要素 <ul> <li>子要素</li> <li>子要素</li> <li>子要素</li> </ul> </li> </ul>
階層化リストを開く（このサンプルはChromeブラウザでの閲覧をおすすめします。）
番号付きリスト
番号付きリストは項目の先頭に番号を表示します。これはulタグではなく、olタグを使うことによって実現できます。
<ol data-role="listview"> <li><a href="#">リンク1</a></li> <li><a href="#">リンク2</a></li> <li><a href="#">リンク3</a></li> <li><a href="#">リンク4</a></li> <li><a href="#">リンク5</a></li> </ol>
番号付きリストを開く（このサンプルはChromeブラウザでの閲覧をおすすめします。）
表示専用リスト
表示専用リストとはリンクのないリストのことで、通常のリンク付きリストビューとは違い、フォントが少し小さくなっています。
<ul data-role="listview"> <li>表示専用リスト1</li> <li>表示専用リスト2</li> <li>表示専用リスト3</li> <li>表示専用リスト4</li> <li>表示専用リスト5</li> </ul>
表示専用リストを開く（このサンプルはChromeブラウザでの閲覧をおすすめします。）
分割ボタン
分割ボタンは複数のアクションを設定したい場合に利用できます。
分割ボタンは右側にアイコンのみのボタンが設定されます。分割ボタンを設定するにはリスト要素にリンクを２つ設定するだけです。
<ul data-role="listview"> <li><a href="#">リンク</a><a href="#">分割ボタン</a></li> <li><a href="#">リンク</a><a href="#">分割ボタン</a></li> <li><a href="#">リンク</a><a href="#">分割ボタン</a></li> <li><a href="#">リンク</a><a href="#">分割ボタン</a></li> <li><a href="#">リンク</a><a href="#">分割ボタン</a></li> </ul>
分割ボタンを開く（このサンプルはChromeブラウザでの閲覧をおすすめします。）
インセットリスト
リストのみのページではなく、他のコンテンツと合わせてリストを表示したい時に利用できるのがインセットリストです。
インセットリストは「data-inset="true"」を指定することでスタイルを変えることができます。
<ul data-role="listview" data-inset="true"> <li><a href="#">リンク1</a></li> <li><a href="#">リンク2</a></li> <li><a href="#">リンク3</a></li> <li><a href="#">リンク4</a></li> <li><a href="#">リンク5</a></li> </ul>
インセットリストを開く（このサンプルはChromeブラウザでの閲覧をおすすめします。）
以上で、リストビュー基本編1の紹介を終わります。
次回のリストビュー基本編2では、分類や子要素数の表示、サムネイルやアイコンの表示、検索フィルターについて紹介します。
